<template>
    <el-card class="box-card">
        <!-- 1.面包屑 -->
        <my-bread level1="商品管理" level2="商品列表"></my-bread>

        <!-- 搜索 -->
        <el-row class="searchRow">
            <el-col>
                <el-input
                    placeholder="输入姓名查找"
                    v-model="query"
                    class="inputSearch"
                >
                </el-input>
                <el-button
                    @click="$router.push({ name: 'goodsadd' })"
                    type="success"
                    >添加</el-button
                >
            </el-col>
        </el-row>

        <!-- 表格 -->
        <el-table
            :data="
                listData.filter(
                    (data) =>
                        !query ||
                        data.name.toLowerCase().includes(query.toLowerCase())
                )
            "
            border
        >
            <el-table-column
                type="index"
                label="编号"
                align="center"
                width="60"
            >
            </el-table-column>
            <el-table-column
                prop="name"
                label="商品名称"
                align="center"
                width="490"
            >
            </el-table-column>
            <el-table-column
                prop="price"
                label="商品价格"
                align="center"
                width="100"
            >
            </el-table-column>
            <el-table-column
                prop="weight"
                label="商品重量"
                align="center"
                width="100"
            >
            </el-table-column>
            <el-table-column label="创建日期" align="center" width="120">
                <template slot-scope="scope">
                    {{ scope.row.time | fmtdate }}
                </template>
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作"
                align="center"
                width="100"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        plain
                        type="primary"
                        icon="el-icon-edit"
                        circle
                        @click="edit(scope.$index, scope.row)"
                    ></el-button>
                    <el-button
                        size="mini"
                        plain
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="del(scope.$index, scope.row)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pag"
            background
            layout="prev, pager, next"
            :total="1000"
        >
        </el-pagination>
        <!-- 新增编辑弹框 -->
        <el-dialog
            :title="isEdit ? '编辑' : '新增计划'"
            :visible.sync="dialogFormVisible"
        >
            <el-form :model="form">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.price"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="商品重量" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.weight"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOk">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            dialogFormVisible: false,
            isEdit: false,
            query: "",
            formLabelWidth: "120px",
            RolName: "",
            form: {
                name: "",
                price: "",
                weight: "",
                region: "",
            },
            listData: [
                {
                    id: 1,
                    name:
                        "恒源祥羊毛衫男士鸡心领保暖圆领针织打底衫男士V领薄款毛衣国货",
                    price: "¥100",
                    weight: "100g",
                    time: new Date(),
                    state: true,
                },
                {
                    id: 2,
                    name:
                        "ZARA【打折】新款 男装 冬季羊毛双面毛呢大衣外套 05854690800",
                    price: "¥100",
                    weight: "100g",
                    time: new Date(),
                    state: true,
                },
                {
                    id: 3,
                    name:
                        "骆驼男装2020秋冬季新款男士百搭休闲牛仔裤中年直筒宽松长裤子潮",
                    price: "¥100",
                    weight: "100g",
                    time: new Date(),
                    state: false,
                },
                {
                    id: 4,
                    name:
                        "骆驼男装2020秋冬季新款男士百搭休闲牛仔裤中年直筒宽松长裤子潮",
                    price: "¥100",
                    weight: "100g",
                    time: new Date(),
                    state: true,
                },
                {
                    id: 5,
                    name:
                        "HLA/海澜之家柔软花纹双领针织衫休闲舒适假两件套头衫男",
                    price: "¥100",
                    weight: "100g",
                    time: new Date(),
                    state: true,
                },
            ],
        };
    },
    methods: {
        addOk() {
            if (this.isEdit) {
                this.listData.splice(this.editIndex, 1, this.form);
            } else {
                this.listData.push(this.form);
            }
            this.dialogFormVisible = false;
        },
        edit(index) {
            this.form = { ...this.listData[index] };
            this.dialogFormVisible = true;
            this.isEdit = true;
            this.editIndex = index;
        },

        del(index) {
            this.listData.splice(index, 1);
        },
    },
};
</script>

<style >
.box-card {
    height: 100%;
}
.inputSearch {
    width: 300px;
}
.searchRow {
    margin-top: 20px;
}
.el-table {
    width: 85%;
    margin-top: 5px;
}
.pag {
    padding-left: 580px;
}
</style>